<style scoped>
  .amap-wrapper {
    width: 500px;
    height: 500px;
  }
</style>
<template>
  <div>
    <div id="container" v-show="show" style="width:100%; height:550px"></div>
  </div>
</template>
<script>
  import AMap from 'AMap'
  var map
  export default {
      data() {
      return {
        show:true,
        order_no:this.$route.query.order_no,
        list:[]
      };
    },
    mounted: function () {
      var this_=this;
      this.init()
      this.$store.commit("changeParame", {
        headerShow:true,
        headerBack: true,
        hederContent: "订单轨迹详情",
        bottom: "1",
        bottomShow: false
      });
    },
    methods: {
      init: function () {
        var this_=this;
        map = new AMap.Map('container', {
          center: [116.397428, 39.90923],
          resizeEnable: true,
          zoom: 10
        })
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.Scale())
        })
        var lineArr = [];
        var title="";
        var marker;
        var marker2;
        var this_ = this;
        this.utils.request.queryOrderRecordMap({orderNos:this_.order_no},function(data){
          for(var i=0;i<data.rows.length;i++){
              // lineArr.push([data.rows[i].lgt, data.rows[i].lat]);
              // console.log(GPS);
              var lanLat=GPS.delta(Number(data.rows[i].lat),Number(data.rows[i].lgt));
              lineArr.push([lanLat.lon,lanLat.lat])
          }
          title = '<span style="font-size:11px;color:#F00;">货物信息</span>';
          var content = [];
          content.push("开始时间：" + this_.dateFtt('yyyy-MM-dd hh:mm:ss', new Date(data.rows[0].create_time)));
          marker = new AMap.Marker({
            map: map,
            icon: "http://webapi.amap.com/images/car.png",
            autoRotation: true,
            position: lineArr[0],
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true
          });
          marker2 = new AMap.Marker({
              map: map,
              icon: "http://webapi.amap.com/images/car.png",
              autoRotation: true,
              position: lineArr[lineArr.length-1],
              offset: new AMap.Pixel(-26, -13),
              autoRotation: true
          });
          //鼠标点击marker弹出自定义的信息窗体
          AMap.event.addListener(marker, 'click', function() {
            infoWindow.open(map, marker.getPosition());
          });
          var infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: this_.createInfoWindow(title, content.join("<br/>")),
            offset: new AMap.Pixel(0, -30)
          });
          AMap.event.addListener(marker2, 'click', function () {
              infoWindow2.open(map, marker2.getPosition());
          });
          var content2=[];
          content2.push("车牌号："+lineArr[lineArr.length-1].license);
          content2.push("电话："+lineArr[lineArr.length-1].mobile);
          content2.push("当前时间："+lineArr[lineArr.length-1].create_time);
          var infoWindow2 = new AMap.InfoWindow({
              isCustom: true,  //使用自定义窗体
              content: this_.createInfoWindow(title, content2.join("<br/>")),
              offset: new AMap.Pixel(0, -30)
          });
          // 绘制轨迹
          var polyline = new AMap.Polyline({
            map: map,
            path: lineArr,
            strokeColor: "red", //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 4, //线宽
            strokeStyle: "solid" //线样式
          });
          map.setFitView();
          map.setZoom(15);
          map.setCenter(lineArr[lineArr.length - 1]);
        }) 
      },
      mapShow:function(){
        this.show=this.show?false:true; 
      },
      createInfoWindow:function(title, content){
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";
        info.style.width = '200px';
        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = this.closeInfoWindow;

        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        middle.style.textAlign = 'left';
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        var sharp = document.createElement("img");
        sharp.src = "https://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
      },
      closeInfoWindow:function(){
        this.map.clearInfoWindow();
      },
      dateFtt:function (fmt, date) { //author: meizz
        var o = {
          "M+": date.getMonth() + 1, //月份
          "d+": date.getDate(), //日
          "h+": date.getHours(), //小时
          "m+": date.getMinutes(), //分
          "s+": date.getSeconds(), //秒
          "q+": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
		  }
    }
  }
</script>
<style>
.content-window-card {
      position: relative;
      box-shadow: none;
      bottom: 0;
      left: 0;
      width: auto;
      padding: 0;
  }

  .content-window-card p {
      height: 2rem;
  }

  .custom-info {
      border: solid 1px silver;
  }

  div.info-top {
      position: relative;
      background: none repeat scroll 0 0 #F9F9F9;
      border-bottom: 1px solid #CCC;
      border-radius: 5px 5px 0 0;
  }

  div.info-top div {
      display: inline-block;
      color: #333333;
      font-size: 14px;
      font-weight: bold;
      line-height: 31px;
      padding: 0 10px;
  }

  div.info-top img {
      position: absolute;
      top: 10px;
      right: 10px;
      transition-duration: 0.25s;
  }

  div.info-top img:hover {
      box-shadow: 0px 0px 5px #000;
  }

  div.info-middle {
      font-size: 12px;
      padding: 10px 6px;
      line-height: 20px;
  }

  div.info-bottom {
      height: 0px;
      width: 100%;
      clear: both;
      text-align: center;
  }

  div.info-bottom img {
      position: relative;
      z-index: 104;
  }

  span {
      margin-left: 5px;
      font-size: 20px;
  }

  .info-middle img {
      float: left;
      margin-right: 6px;
  }
  .amap-icon img{
      transform: rotate(180deg);
  }
  #zgtIcon {
	/*width: 90%;*/
	/*height: 120px;*/
	width: 80%;
	height: 146px;
	padding: 12px;
}

.dzwfont {
	font-family: "dzwfont" !important;
	font-size: 27px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.dzw-saomiao:before {
	content: "\e6cf";
}

* {
	margin: 0px;
	padding: 0px;
}

#maps {
	text-align: center;
	color: #488aff;
	padding-top: 16px;
}

a {
	text-decoration: none;
	font-size: 16px;
	color: #488aff;
}

#testname {
	font-size: 14px;
	height: 25px;
	border-radius: 4px;
	border: 1px solid #c8cccf;
	color: #6a6f77;
}

#inquire {
	height: 36px;
	width: 50px;
	background-color: #488aff;
	/* Green */
	border: none;
	color: white;
	text-align: center;
	font-size: 12px;
}

/*--------------------------------*/
.package-status {
	padding: 18px 0 0 0
}

.package-status .status-list {
	margin: 0;
	padding: 0;
	margin-top: -5px;
	padding-left: 8px;
	list-style: none;
}

.package-status .status-list li {
	border-left: 2px solid #d9d9d9;
	text-align: left;
}

.package-status .status-list li:before {
	/* 流程点的样式 */
	content: '';
	border: 3px solid #f3f3f3;
	background-color: #d9d9d9;
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	margin-left: -6px;
	margin-right: 10px
}

.package-status .status-list .latest:before {
	background-color: #488aff;
	border-color: #f8e9e4;
}

.package-status .status-box {
	overflow: hidden
}

.package-status .status-list li {
	height: auto;
}

.package-status .status-list {
	margin-top: -8px
}

.package-status .status-box {
	position: relative
}

.package-status .status-box:before {
	content: " ";
	background-color: #f3f3f3;
	display: block;
	position: absolute;
	top: -8px;
	left: 20px;
	width: 10px;
	height: 4px
}

.package-status .status-list {
	margin-top: 0px;
}

/* .package-status .status-list .latest{border:none} */
/* .package-status .status-list li{margin-bottom:-2px} */

.status-list li:not(:first-child) {
	padding-top: 10px;
}

.status-content-before {
	text-align: left;
	margin-left: 25px;
	margin-top: -20px;
}

.status-content-latest {
	text-align: left;
	margin-left: 25px;
	color: #488aff;
	margin-top: -20px;
}

.status-time-before {
	text-align: left;
	margin-left: 25px;
	font-size: 10px;
	margin-top: 5px;

}

.status-time-latest {
	text-align: left;
	margin-left: 25px;
	color: #488aff;
	font-size: 10px;
	margin-top: 5px;
}

.status-line {
	border-bottom: 1px solid #ccc;
	margin-left: 25px;
	margin-top: 10px;
}

/*--------------------------------------------*/
/* html{margin: 0; padding: 0;} */
#maps {
	margin: 0 auto;
	padding: 0;
	max-width: 1000px;
	background: #f5f6f8;
	font-size: 14px;
}

.m-header {
	position: relative;
	height: 4em;
	line-height: 0.48rem;
	font-size: 1.14rem;
	border-bottom: 1px solid #EBEBEB;
	text-align: center;
	color: #2C2C2C;
	letter-spacing: 0;
	background: #fff;
  padding-top: 18px;
}

.m-return {
	position: absolute;
	display: inline-block;
	top: 0.13rem;
	left: 0.12rem;
	width: 0.14rem;
	height: 0.22rem;
	background-image: url(http://c2.cgyouxi.com/website/mobile/img/arrow-l.png?v=20180122);
	background-size: 100% 100%;
}

.m-tab {
	position: relative;
	padding: 0.10rem 0 0;
	width: 100%;
	background: #fff;
}

.m-tab a {
	position: absolute;
	display: inline-block;
	width: 50%;
	font-size: 1.14rem;
	color: #2C2C2C;
	letter-spacing: 0;
	line-height: 2.38rem;
	text-align: center;
	text-decoration: none;
}

.m-tab a:first-child {
	top: 0;
	left: 0;
}

.m-tab a.m-coupons {
	top: 0;
	right: 0;
}

.m-tab a.active {
	border-bottom: 2px solid #488aff;
}

.m-division {
	height: 1px;
	background: #EBEBEB;
}

.m-view1 {
	background: #fff;
	height: 100%;
}

.m-view2 {
	background: #fff;
	height: 100%;
}

@media screen and (min-width: 360px) {
	/* html {
        font-size: 100px!important;
    } */
}

</style>